<template>
  <div>
    <vxe-toolbar setting export :refresh="{query: findList}">
      <template v-slot:buttons>
        <vxe-button @click="filterNameEvent">刷新</vxe-button>
        <vxe-button @click="filterAgeEvent">新增</vxe-button>
        <vxe-button @click="updateNameFilterEvent">保存</vxe-button>
        <vxe-button @click="$refs.xTable.clearFilter()">清除所有的筛选条件</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      height="700"
      :loading="loading"
      :data="tableData"
    >
      <vxe-table-column
        field="author"
        title="审核状态"
        sortable
        :filters="nameFilterList"
        :filter-method="filterNameMethod"
      />
      <vxe-table-column
        field="author"
        title="姓名"
        sortable
        :filters="nameFilterList"
        :filter-method="filterNameMethod"
      />
      <vxe-table-column
        field="content_short"
        title="公司名称"
        sortable
        :filters="[{ data: '' }]"
        :filter-method="filterRoleMethod"
      >
        <template v-slot:filter="{ column, context }">
          <select
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            class="my-select"
            @change="context.changeOption($event, !!option.data, option)"
          >
            <option v-for="(label, cIndex) in roleList" :key="cIndex" :value="label">{{ label }}</option>
          </select>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="timestamp"
        title="入驻商类型"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="电话号码"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="银行汇款账号"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="冻结保证金（元）"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="税点（%）..."
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="推荐人"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="是否独立核算"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column
        field="timestamp"
        title="是否审核货源"
        sortable
        :filter-multiple="false"
        :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"
      />
      <vxe-table-column field="display_time" title="创建时间" sortable />

      <vxe-table-column field="display_time" title="审核时间" sortable />

      <vxe-table-column title="操作" fixed="right" width="200">
        <template>
          <vxe-button type="text">编辑</vxe-button>
          <vxe-button type="text">删除</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.page"
      :page-size.sync="listQuery.limit"
      :total="listQuery.totalzong"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { Script } from 'vm'
import { fetchList } from '@/api/article'
Vue.use(VXETable)
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      listQuery: {
        page: 1,
        limit: 13,
        totalzong: 0
      },
      roleList: ['', '前端', '后端', '设计师'],
      nameFilterList: [
        { label: 'id大于10', value: 10 },
        { label: 'id大于40', value: 40 }
      ]
    }
  },
  created() {
    this.findList()
  },
  methods: {
    findList() {
      this.loading = true
      fetchList(this.listQuery).then(response => {
        this.tableData = response.data.items
        this.listQuery.totalzong = response.data.total
        console.log(this.tableData)
        console.log(this.listQuery)
        this.loading = false
      }) /*
      return new Promise(resolve => {
        setTimeout(() => {
          //this.tableData = window.MOCK_DATA_LIST.slice(0, 50);
          this.loading = false;
          resolve();
        }, 300);
      }); */
    },
    filterNameMethod({ value, row, column }) {
      return row.id >= value
    },
    filterRoleMethod({ option, row }) {
      return row.role === option.data
    },
    filterAgeMethod({ option, row }) {
      return row.age === Number(option.data)
    },
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.page = currentPage
      this.listQuery.limit = pageSize
      this.findList()
    },
    updateNameFilterEvent() {
      const xTable = this.$refs.xTable
      xTable
        .filter('name', options => {
          // 修改筛选列表
          return [
            {
              label: 'id大于10',
              value: 10
            },
            {
              label: 'id大于20',
              value: 20
            },
            {
              label: 'id大于30',
              value: 30,
              checked: true // 设置为选中状态
            },
            {
              label: 'id大于40',
              value: 40
            }
          ]
        })
        .then(() => {
          // 修改条件之后，需要手动调用 updateData 处理表格数据
          xTable.updateData()
        })
    },
    filterNameEvent() {
      const xTable = this.$refs.xTable
      xTable
        .filter('name')
        .then(options => {
          // 处理条件并设置选中的选项
          if (options.length) {
            const option = options[1]
            option.checked = true
          }
        })
        .then(() => {
          // 修改条件之后，需要手动调用 updateData 处理表格数据
          xTable.updateData()
        })
    },
    filterAgeEvent() {
      const xTable = this.$refs.xTable
      xTable
        .filter('age')
        .then(options => {
          // 处理条件并设置选中的选项
          if (options.length) {
            const option = options[0]
            option.data = '26'
            option.checked = true
          }
        })
        .then(() => {
          // 修改条件之后，需要手动调用 updateData 处理表格数据
          xTable.updateData()
        })
    },

    filterNameEvent() {
      const xTable = this.$refs.xTable
      xTable
        .filter('name')
        .then(options => {
          // 处理条件并设置选中的选项
          if (options.length) {
            const option = options[1]
            option.checked = true
          }
        })
        .then(() => {
          // 修改条件之后，需要手动调用 updateData 处理表格数据
          xTable.updateData()
        })
    }
  }
}
</script>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
